<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5 文件切割上传!</title>
    <!-- zui -->
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
	<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/lib/uploader/zui.uploader.min.css" >

  </head>
  <body>
  	<div class="container">
		<h1>HTML5 文件分片上传</h1>
		<div class="row">
			<div class="col-lg-12">
				<div id="uploaderExample" class="uploader">
				  <div class="file-list" data-drag-placeholder="请拖拽文件到此处"></div>
				  <button type="button" class="btn btn-primary uploader-btn-browse"><i class="icon icon-cloud-upload"></i> 选择文件</button>
				   <button type="button" class="btn btn-primary begin"><i class="icon icon-cloud-upload"></i> 开始上传</button>
				</div>
			</div>
		</div>
		<div class="file-show">
			
		</div>

	</div>
    

    <!-- 在此处编码你的创意 -->

    <!-- ZUI Javascript 依赖 jQuery -->
	<script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
	<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
	<script src="//cdn.bootcss.com/zui/1.9.1/lib/uploader/zui.uploader.min.js"></script>
	<script type="text/javascript">
		var successCounts =new Array();
		$(function($){
			$('#uploaderExample').uploader({
			    autoUpload: false,            // 当选择文件后立即自动进行上传操作
			    url: '/uploadMulit'  // 文件上传提交地址
			});
			$(".begin").click(function(){
				var uploader = $('#uploaderExample').data('zui.uploader');
				var file_array = uploader.getFiles();//获取已经选择的文件
				successCounts.length=0;
				if(file_array.length <=0){
					new $.zui.Messager('您还没有选择要上传的文件', {
					    type: 'danger' // 定义颜色主题
					}).show();
				}else{
					$(".file-show").html('');
					for(var i=0;i<file_array.length;i++){
						upload(file_array[i]);
					}
				}
			});
			function upload(file_obj){
				
				new $.zui.Messager('文件'+file_obj.name+'开始上传', {
				    type: 'success' // 定义颜色主题
				}).show();
				successCounts[file_obj.id]=0;
				var htmls='<div class="row"><div class="col-lg-8"><!-- 条纹效果 --><div class="progress progress-striped active" ><div class="progress-bar progress-bar-success " id="progress_'+file_obj.id+'" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"><span class="sr-only">0% Complete (success)</span></div></div><strong><span class="progressbar-value">0</span>%</strong></div><div class="col-lg-4" id="filenames_'+file_obj.id+'">'+file_obj.name+'</div></div>';
				
				$(".file-show").append(htmls);
				
				var name = file_obj.name, //文件名
				size = file_obj.size, //总大小
				shardSize = 256 * 1024,//2 * 1024 * 1024, //以2MB为一个分片
				shardCount = Math.ceil(size / shardSize); //总片数
				
				$.getJSON('/getSucIndexs',{'name':name,'total':shardCount},function(result){
					if(result.state ==='ok'){
						var succ_indexs;
						
						if(result.succ_indexs != '' && result.succ_indexs != null && result.succ_indexs.length() >0){
							succ_indexs=result.succ_indexs.split(",");
						}else{
							succ_indexs = new Array();
						}
						
						successCounts[file_obj.id] = succ_indexs.length;
						
						var tempFile=null;
						for(var i = 0;i < shardCount;++i){
							var index= i+1;
							var a = succ_indexs.indexOf(''+index); //判断这个片段是否已经上传过了
							
							if(a ==-1 ){
								//计算每一片的起始与结束位置
								var start = i * shardSize,
								end = Math.min(size, start + shardSize);
								//构造一个表单，FormData是HTML5新增的
								var form = new FormData();
								var tempBolb = file_obj.getNative().slice(start,end);//slice方法用于切出文件的一部分
								var tempName=name+index+".temp";
								tempFile = new File([tempBolb],tempName);//重命名切割出来的文件
								form.append("data", tempFile); 
								form.append("name", name);
								form.append("total", shardCount); //总片数
								form.append("index", index); //当前是第几片

								//Ajax提交
								$.ajax({
									url: "/uploadMulit",
									type: "POST",
									data: form,
									async: true, //异步
									processData: false, //很重要，告诉jquery不要对form进行处理
									contentType: false, //很重要，指定为false才能形成正确的Content-Type
									success: function(result){
										if(result.state==='ok'){
											
											if(name === file_obj.name){
												successCounts[file_obj.id] = successCounts[file_obj.id] +1;
												//计算上传进度
												var file_progress= parseInt(100*(successCounts[file_obj.id])/shardCount);
												
												//显示上传进度
												$('#progress_'+file_obj.id).css('width', file_progress + '%');
												$('#progress_'+file_obj.id).parents(".col-lg-8").find('.progressbar-value').text(file_progress);
											}
											
										}
										
									}
									
								});
							}
							
						}
						
					}else{
						new $.zui.Messager('上传失败', {
						    type: 'danger' // 定义颜色主题
						}).show();
					}
				}).error(function(){
					new $.zui.Messager('文件上传失败，请重试', {
					    type: 'danger' // 定义颜色主题
					}).show();
					
				});
				
			}
		});
	</script>
  </body>
</html>